<template>
	<view class="flex">
		<view v-for="(item, index) in list_" :key="index" class="item flex flex-column flex-center">
			<image class="img" :src="item.img" mode="aspectFill"></image>
			<view class="text">{{ item[cache.lang] }}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { storage } from "/@/cool/utils";
import { useI18n } from "vue-i18n";
const { cache } = useStore();
const { locale } = useI18n();
const { t } = useI18n();
const { router } = useCool();
const ui = useUi();
const list_ = ref([
	{
		zh: "小付咖啡",
		en: "Coffee",
		img: "/static/images/icon_scooffe.png",
	},
	{
		zh: "市长公文包",
		en: "Insurance",
		img: "/static/images/icon_file.png",
	},
	{
		zh: "locker",
		en: "Brief case",
		img: "/static/images/icon_locker.png",
	},
	{
		zh: "意大利之家",
		en: "Casa Italia",
		img: "/static/images/icon_cruitaly.png",
	},
	{
		zh: "旅游攻略",
		en: "Travel guide",
		img: "/static/images/icon_lvyou.png",
	},
]);
</script>

<style lang="scss" scoped>
.item {
	flex: 0 0 20%;
	.img {
		width: 90rpx;
		height: 90rpx;
	}
	.text {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 16rpx;
		color: #333333;
		text-align: center;
		margin-top: 20rpx;
	}
}
</style>
